<template>
    <div class="about">
        <h3>在子组件中使用VUEX</h3>
        <h2>NUM: {{$store.state.num}}</h2>
        <button @click="cnum">Actions</button>
        <h2>DNUM: {{$store.state.dnum}}</h2>
        <h2>vuexpow-getters: {{$store.getters.vxnum}}</h2>
        <h2>getters-obj-1:{{$store.getters.totalprice}}</h2>
        <h2>getters-obj-2:{{$store.getters.goodsgt}}</h2>
        <h2>getters-obj-3:{{$store.getters.goodsgt10Totalprice}}</h2>
        <h2>getters-obj-4:{{$store.getters.goodsgtWithParam(10)}}</h2>
        <h2>user模块中的对象</h2>
        <h2>{{$store.state.user.name}}</h2>
        <h2>{{$store.getters.fullname}}</h2>
        <h2>{{$store.getters.fullname2}}</h2>
        <h2>{{$store.getters.fullname3}}</h2>
        <button @click="cname">改User模块中的名字</button>
        <button @click="cnameAction">改User模块中的名字-actions</button>
    </div>
</template>

<script>
    export default {
        name: 'About',
        props: {
            count: Number
        },
        methods: {
            cnum() {
                this.$store.dispatch('demo', {name: "xzc", age: 36});
            },
            cname() {
                this.$store.commit('setname', 'cname');
            },
            cnameAction() {
                this.$store.dispatch('dosome', 'cnameAction');
            }
        }
    }
</script>
